import React, { Component } from 'react';
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile';
import { API, BASE_URL } from '../../utils/axios';
import { getCurrentCity } from '../../utils'
import "./index.scss";
import SearchHeader from '../../components/SearchHeader'
// 导入图片
import nav1 from '../../assets/images/nav-1.png'
import nav2 from '../../assets/images/nav-2.png'
import nav3 from '../../assets/images/nav-3.png'
import nav4 from '../../assets/images/nav-4.png'
const navOptions = [
  {
    imgSrc: nav1,
    title: '整租',
    path: 'home/list'
  },
  {
    imgSrc: nav2,
    title: '合租',
    path: '/home/list'
  },
  {
    imgSrc: nav3,
    title: '地图找房',
    path: '/map'
  },
  {
    imgSrc: nav4,
    title: '去出租',
    path: '/rent'
  }
];
/**
 * 问题：轮播图是动态加载的，但数据还未返回就渲染轮播图时，轮播图会发生不能播放以及高度的bug
 * 解决方法，设置一个状态变量，当数据返回时为true才渲染
 */

// H5中的获取位置信息
navigator.geolocation.getCurrentPosition(position => {
  console.log('当前位置信息', position);
});

export default class Index extends Component {
  state = {
    swipers: [],
    imgHeight: 212,
    isSwiperLoaded: false,
    // 租房小组数据
    groups: [],
    // 最新资讯
    news: [],
    currentCityName: '广州'
  }

  // 代替componentWillMount
  componentWillMount() {
    this.getSwipers();
    this.getGroups();
    this.getNews();
    
    // 获取当前城市
    getCurrentCity().then(res=> {
      const currentCityName = res.label;
      this.setState({currentCityName});
    });
  }
  
  render() {
    return (
      <div className="index">
        {/* 轮播图 */}
        <div className="swiper">
          {this.state.isSwiperLoaded === true ?
            <Carousel autoplay infinite>
              {this.renderSwipers()}
            </Carousel>
            : '正在加载轮播图...'
          }
          {/* 搜索框 */}
          <SearchHeader cityName={this.state.currentCityName} />
        </div>
        {/* 导航菜单 */}
        <Flex className="nav">
          {this.renderNavs()}
        </Flex>
        {/* 租房小组 */}
        <div className="group">
          <h3 className='title'>
            租房小组 <span className="more">更多</span>
          </h3>
          <Grid data={this.state.groups}
            square={false}
            columnNum={2}
            hasLine={false}
            renderItem={this.renderGorup} />
        </div>
        {/* 最新资讯 */}
        <div className="news">
          <h3 className="news-title">最新资讯</h3>
          <WingBlank size="md">{this.renderNews()}</WingBlank>
        </div>
      </div>
    );
  }

  // 渲染页面-------------------------------------------------
  // 渲染最新资讯
  renderNews() {
    return this.state.news.map(item =>
      <Flex className="news-item" key={item.id} justify="around">
        <div className="imgwrap">
          <img src={BASE_URL + item.imgSrc} alt="" className="img" />
        </div>
        <Flex className="content" direction="column" justify="between">
          <h3 className="title">{item.title}</h3>
          <Flex className="info" justify="between">
            <span>{item.from}</span>
            <span>{item.date}</span>
          </Flex>
        </Flex>
      </Flex>
    );
  }

  // 渲染租房小组
  renderGorup = item => (
    <Flex className="group-item" justify="around" key={item.id}>
      <div className="desc">
        <p className="group-title">{item.title}</p>
        <span className="info">{item.desc}</span>
      </div>
      <img src={BASE_URL + item.imgSrc} alt="" />
    </Flex>
  )

  // 渲染导航菜单
  renderNavs() {
    return (navOptions.map(item =>
      <Flex.Item key={item.title} onClick={() => this.props.history.push(item.path)}>
        <img src={item.imgSrc} alt="" />
        <p>{item.title}</p>
      </Flex.Item>
    ))
  }

  // 渲染轮播图
  renderSwipers() {
    return (
      this.state.swipers.map(item => (
        <a
          key={item.id}
          href='#0'
          style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
        >
          <img
            src={ BASE_URL + item.imgSrc}
            alt=""
            style={{ width: '100%', verticalAlign: 'top' }}
          />
        </a>
      ))
    )
  }

  // 获取数据-------------------------------------------------------
  // 获取最新资讯数据
  async getNews() {
    const { data } = await API.get('/home/news', {
      params: { area: 'area=AREA%7C88cff55c-aaa4-e2e0' }
    });
    this.setState({ news: data.body });
  }

  // 获取租房小组数据
  async getGroups() {
    const { data } = await API.get('/home/groups', {
      params: { area: 'area=AREA%7C88cff55c-aaa4-e2e0' }
    });
    // console.log(data);
    this.setState({ groups: data.body })
  }

  // 获取轮播图数据
  async getSwipers() {
    const { data } = await API.get('/home/swiper');
    this.setState({
      swipers: data.body,
      isSwiperLoaded: true
    })
  }
}
